<!--摄像头管理——设备列表（商家端）-->
<template>
  <div class="ele-body">
    <el-form
      :hide-required-asterisk="true"
      ref="form"
      :model="form"
      label-width="80px"
      @keyup.enter.native="submit"
      @submit.native.prevent
    >
      <el-card
        shadow="never"
        body-style="padding: 30px 22px;"
      >
        <el-row :gutter="15">
          <el-col style="height: 60px" :xs="12" :sm="8" :lg="8" :xl="8">
            <el-form-item label="镜头名称:" prop="displayName" class="width80">
              <el-input
                v-model="form.displayName"
                placeholder="请输入镜头名称"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col style="height: 60px" :xs="12" :sm="8" :lg="8" :xl="8">
            <el-form-item label="网络状态:" prop="status" class="width80">
              <el-select
                v-model="form.status"
                placeholder="请选择"
                class="ele-block"
                clearable
                @clear="see()"
              >
                <el-option label="在线中" :value="1" />
                <el-option label="已离线" :value="2" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col style="height: 60px" :xs="12" :sm="8" :lg="8" :xl="8">
            <el-form-item label="使用状态:" prop="onState" class="width80">
              <el-select
                v-model="form.onState"
                placeholder="请选择"
                class="ele-fluid"
                clearable
              >
                <!--1,空闲中 2使用中 3.已到期 默认为1-->
                <el-option label="空闲中" :value="1" />
                <el-option label="使用中" :value="2" />
                <el-option label="已到期" :value="3" />
              </el-select>
            </el-form-item>
          </el-col>
          <!-- expirationStartTime  _  expirationEndTime -->
          <!--<el-col style="height: 60px" :xs="12" :sm="12" :lg="8" :xl="8">
            <el-form-item label="到期时间:" prop="datetime" class="width80">
              <el-date-picker
                v-model="form.endDatetime"
                type="daterange"
                value-format="yyyy-MM-dd"
                format="yyyy-MM-dd HH:mm:ss"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                class="ele-fluid"
                @change="select"
              />
            </el-form-item>
          </el-col>-->
          <el-col style="height: 60px" :xs="12" :sm="12" :lg="8" :xl="8">
            <el-form-item label="创建时间:" prop="datetime" class="width80">
              <el-date-picker
                v-model="datetime"
                type="daterange"
                value-format="yyyy-MM-dd HH:mm:ss"
                format="yyyy-MM-dd HH:mm:ss"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                class="ele-fluid"
                @change="select"
              />
            </el-form-item>
          </el-col>

        </el-row>
        <el-row class="m-top10">
          <el-col  :xs="12" :sm="12" :lg="12" :xl="12">
            <el-button
              icon="el-icon-zoom-out"
              size="small"
              type="primary"
              class="colorBlue"
              @click="see()"
            >
              查询
            </el-button>
            <el-button
              icon="el-icon-refresh-right"
              size="small"
              class="resetting-btn"
              @click="resetting()"
            >
              重置
            </el-button>
          </el-col>
        </el-row>
      </el-card>
    </el-form>
    <el-card class="m-top10 p-algin10" shadow="never">
      <table-list
        ref="table"
        :form="form"
      />
    </el-card>
  </div>
</template>

<script>
  import tableList from './components/table-list.vue';
  export default {
    name: "index",
    components: {tableList},
    data() {
      return {
        form: {},
        datetime:[]
      }
    },
    methods:{
      see(){
        /*if(!this.form.oemCode){
          delete this.form.oemCode
        }
        if(!this.form.merchantCode){
          delete this.form.merchantCode
        }*/

        if(!this.form.displayName){
          delete this.form.displayName
        }
        if(!this.form.onState){
          delete this.form.onState
        }
        if(!this.form.status){
          delete this.form.status
        }
        if(!this.datetime){
          delete this.form.startTime
          delete this.form.endTime
        }
        this.$nextTick(()=>{
          this.$refs['table'].reload()
        })
      },
      resetting(){
        this.datetime=[]
        this.form={}
        this.$nextTick(()=>{
          this.$refs['table'].reload()
        })
      },
      // 日期选择
      select(e){
        if(this.datetime){
          console.log("日期选择e============",e,'form.datetime',this.datetime)
          Object.assign( this.form, {
            startTime:  this.datetime[0],
            endTime:  this.datetime[1]
          })
        }
      },
    }

  }
</script>

<style scoped>

</style>
